<template>
	<div ref="condition" class="flow-menu">
		<el-form label-width="120px">
			<el-form-item v-show="type === 'node'" label="名称" class="own-el-condition-form-item">
				<el-input v-model="name" placeholder="请输入名称" clearable style="width:auto" />
			</el-form-item>
			<el-form-item v-show="type === 'node' && kind === 'check'" label="类型" class="own-el-condition-form-item">
				<el-radio-group v-model="nodeType">
					<el-radio :label="1" border size="mini">会签</el-radio>
					<el-radio :label="2" border size="mini">或签</el-radio>
					<el-radio :label="3" border size="mini">自由编辑</el-radio>
				</el-radio-group>
				<i v-popover:nodeTypeRef class="own-info-popover el-icon-warning-outline" />
			</el-form-item>
			<el-form-item v-show="type === 'node' && nodeType !==3 && kind === 'check'" label="开关" class="own-el-condition-form-item">
				<el-switch v-model="nodeSwitch" :active-value="1" :inactive-value="0" active-color="#13ce66" />
				<i v-popover:nodeSwitchRef class="own-info-popover el-icon-warning-outline" />
			</el-form-item>
			<el-form-item v-show="type === 'node' && nodeType !==3 && kind === 'check'" label="可选" class="own-el-condition-form-item">
				<el-switch v-model="nodeCanChooseSwitch" :active-value="1" :inactive-value="0" active-color="#13ce66" />
				<i v-popover:nodeCanChooseSwitchRef class="own-info-popover el-icon-warning-outline" />
			</el-form-item>
			<el-form-item v-show="type === 'node' && nodeType !==3 && nodeCanChooseSwitch == 1 && kind === 'check'" label="设置可选人员"
			 class="own-el-condition-form-item">
				<el-select filterable v-model="nodeCanChooseValue" multiple placeholder="请勾选审批人员">
					<el-option v-for="item in nodeCanChooseOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item v-show="type === 'node' && nodeType !==3 && kind !== 'start'" label="可加传阅人" class="own-el-condition-form-item">
				<el-switch v-model="nodeCanAddReadersSwitch" :active-value="1" :inactive-value="0" active-color="#13ce66" />
				<i v-popover:nodeCanAddReadersSwitchRef class="own-info-popover el-icon-warning-outline" />
			</el-form-item>
			<el-form-item v-show="type === 'node' && nodeType !==3 && kind !== 'start'" label="前置传阅人" class="own-el-condition-form-item">
				<el-select filterable v-model="nodePrevReadersValue" multiple placeholder="请勾选前置传阅人">
					<el-option v-for="item in nodePrevReadersOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
				<i v-popover:nodePrevReadersRef class="own-info-popover el-icon-warning-outline" />
			</el-form-item>
			<el-form-item v-show="type === 'node' && nodeType !==3 && kind !== 'start' && kind !== 'end'" label="后置传阅人" class="own-el-condition-form-item">
				<el-select filterable v-model="nodeAfterReadersValue" multiple placeholder="请勾选后置传阅人">
					<el-option v-for="item in nodeAfterReadersOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
				<i v-popover:nodeAfterReadersRef class="own-info-popover el-icon-warning-outline" />
			</el-form-item>
		</el-form>
		<el-form>
			<el-form-item v-show="nodeType !==3 && nodeCanChooseSwitch == 0 && kind === 'check'" class="own-el-condition-form-item-drag">
				<div class="flow-node-condition-form-item">
					<div class="title">元符号（拖拽）</div>
				</div>
				<draggable v-model="sourceList" :options="draggableSourceOptions" class="flow-condition-draggable-area draggable-area-source"
				 @end="sourceEnd">
					<div v-for="source in sourceList" :key="source.id" class="flow-node-condition" :type="source.type">{{ source.name }}</div>
				</draggable>
				<div class="flow-node-condition-form-item">
					<div class="title">条件</div>
					<div class="memo">
						<el-button size="mini" icon="el-icon-circle-plus-outline" @click.stop="addCondition()">新增</el-button>
					</div>
				</div>
				<draggable v-model="dataList" :options="draggableTargetOptions" class="flow-condition-draggable-area flow-condition-draggable-area-target">
					<div v-for="(data,index) in dataList" :key="data.id" class="flow-node-condition" :type="data.type">
						{{ data.name }}
						<div class="flow-condition-close" @click.stop="deleteData(index)" />
					</div>
				</draggable>
			</el-form-item>
			<el-form-item style="text-align: center;">
				<el-button type="primary" size="mini" icon="el-icon-check" @click="save">保存</el-button>
			</el-form-item>
		</el-form>

		<!-- 弹框 -->
		<el-dialog title="新增条件" :modal="false" :visible.sync="dialogCU" width="60%" @close="dialogCUClose()">
			<el-form ref="cuForm" v-loading="dialogCULoading" :inline="true" :model="cuForm">
				<el-form-item>
					<el-cascader v-model="cuForm.type" placeholder="请选择类型" :options="conditionTypeFirstOptions" :show-all-levels="false"
					 @change="changeConditionType" />
				</el-form-item>
				<el-form-item>
					<el-select filterable v-model="cuForm.operator" placeholder="请选择关系">
						<el-option v-for="item in conditionTypeSecondOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input v-if="notChoose" v-model="cuForm.value" placeholder="请输入内容" />
					<el-select filterable v-else-if="notChooseTreeAndOwnAndDate" v-model="cuForm.value" placeholder="请选择内容">
						<el-option v-for="item in conditionTypeThirdOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
					<el-select filterable v-else-if="notChooseTreeAndDate" v-model="cuForm.value" multiple placeholder="请选择可修改项">
						<el-option v-for="item in conditionTypeThirdOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
					<el-date-picker v-else-if="notChooseTree" v-model="cuForm.value" type="datetime" placeholder="选择日期时间" align="right"
					 value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" />
					<el-cascader v-else v-model="cuForm.value" placeholder="请选择内容" separator="." :options="conditionTypeThirdOptions" />
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click.native="dialogCU=false">取 消</el-button>
				<el-button type="primary" @click.native="onAdd()">确 定</el-button>
			</span>
		</el-dialog>
		<el-popover ref="nodeTypeRef" placement="bottom" width="310" trigger="click">
			会签（所有审批人都通过才流转到下一节点）<br>或签（只需其中一个审批人通过即可）<br>自由编辑（提交人可自行编辑流程）
		</el-popover>
		<el-popover ref="nodeSwitchRef" placement="bottom" width="320" trigger="click">
			启用后，提交人可在提交时关闭此节点。<br>即审批时跳过该节点，直接流转到下一个审批。
		</el-popover>
		<el-popover ref="nodeCanChooseSwitchRef" placement="bottom" width="410" trigger="click">
			启用后，提交人可从设置好的人员中，选择该节点的审批人。
		</el-popover>
		<el-popover ref="nodeCanAddReadersSwitchRef" placement="bottom" width="320" trigger="click">
			启用时，提交人可为该节点额外添加传阅人。
		</el-popover>
		<el-popover ref="nodePrevReadersRef" placement="bottom" width="270" trigger="click">
			流程流转到该节点时，推送给传阅人。
		</el-popover>
		<el-popover ref="nodeAfterReadersRef" placement="bottom" width="340" trigger="click">
			流程从该节点流转至下一节点时，推送给传阅人。
		</el-popover>
	</div>
</template>
<script>
	import {
		cloneDeep
	} from 'lodash'
	import draggable from 'vuedraggable'
	/*
		import {
			getConnectSetData
		} from '../js/connect_set_data.js'

		import {
			getAllUsersData
		} from '../js/get_all_users.js'
		import {
			getAllDepartmentsData
		} from '../js/get_all_departments.js'
		import {
			getAllJobsData
		} from '../js/get_all_jobs.js'
		import {
			getAllDepJobsData
		} from '../js/get_all_deps_jobs.js'
		import {
			getAllCanEditOptions
		} from '../js/get_all_can_edit_options.js'
	  */
	import {
		getAllCanEditOptions,
		getAllDepJobsData,
		getAllDepartmentsData,
		getAllJobsData,
		getAllUsersData,
		getConnectSetData
	} from '@/api/system/form_module'
	export default {
		components: {
			draggable
		},
		props: {
			dataProp: {
				type: Object,
				default: () => {}
			},
			typeProp: {
				type: String,
				default: 'line'
			}
		},
		data() {
			return {
				// draggable配置参数参考 https://www.cnblogs.com/weixin186/p/10108679.html
				draggableSourceOptions: {
					group: {
						name: 'tt',
						pull: 'clone',
						put: false
					},
					preventOnFilter: false,
					sort: false,
					disabled: false,
					forceFallback: true
				},
				draggableTargetOptions: {
					group: {
						pull: true,
						put: ['tt']
					},
					preventOnFilter: false,
					sort: true,
					disabled: false,
					forceFallback: true,
					scroll: true
				},
				pickerOptions: {
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date())
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date()
							date.setTime(date.getTime() - 3600 * 1000 * 24)
							picker.$emit('pick', date)
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date()
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
							picker.$emit('pick', date)
						}
					}]
				},
				// node 或 line
				type: this.typeProp,
				// start check end
				kind: 'check',
				nodeType: 1,
				name: '',
				// 开关
				nodeSwitch: 0,
				// 可选
				nodeCanChooseSwitch: 0,
				// 可选选中项
				nodeCanChooseValue: [],
				// 可选待选项
				nodeCanChooseOptions: [],
				// 可加传阅人
				nodeCanAddReadersSwitch: 0,
				// 前置传阅人
				nodePrevReadersValue: [],
				// 前置传阅人待选项
				nodePrevReadersOptions: [],
				// 后置传阅人
				nodeAfterReadersValue: [],
				// 后置传阅人待选项
				nodeAfterReadersOptions: [],
				// 拖动待选项(元符号)
				sourceList: [{
						id: '1',
						type: 'left',
						name: '(',
						value: 'left'
					}, {
						id: '2',
						type: 'right',
						name: ')',
						value: 'right'
					},
					{
						id: '3',
						type: 'and',
						name: '且',
						value: 'and'
					},
					{
						id: '4',
						type: 'or',
						name: '或',
						value: 'or'
					}
				],
				dataList: this.dataProp.data || [],
				dialogCU: false,
				dialogCULoading: false,
				cuForm: {
					type: null,
					operator: null,
					value: null
				},
				conditionTypeFirstOptions: [],
				conditionTypeSecondOptionsCur: 'choose',
				conditionTypeSecondOptions: [],
				conditionTypeSecondOptionsDefault: {
					'choose': [{
						label: '是',
						value: '='
					}, {
						label: '不是',
						value: '<>'
					}],
					'choose_tree': [{
						label: '是',
						value: '='
					}, {
						label: '不是',
						value: '<>'
					}],
					'string': [{
						label: '是',
						value: '='
					}, {
						label: '不是',
						value: '<>'
					}, {
						label: '包含',
						value: 'like'
					}, {
						label: '不包含',
						value: 'unlike'
					}],
					'number': [{
						label: '等于',
						value: '='
					}, {
						label: '小于',
						value: '<'
					}, {
						label: '小于等于',
						value: '<='
					}, {
						label: '大于',
						value: '>'
					}, {
						label: '大于等于',
						value: '>='
					}],
					'date': [{
						label: '等于',
						value: '='
					}, {
						label: '小于',
						value: '<'
					}, {
						label: '小于等于',
						value: '<='
					}, {
						label: '大于',
						value: '>'
					}, {
						label: '大于等于',
						value: '>='
					}],
					'belong': [{
						label: '是',
						value: '='
					}, {
						label: '不是',
						value: '<>'
					}, {
						label: '从属',
						value: 'belong'
					}, {
						label: '不从属',
						value: 'unbelong'
					}],
					'own': [{
						label: '可修改项目',
						value: 'canEdit'
					}]
				},
				notChoose: true,
				notChooseTreeAndOwnAndDate: true,
				notChooseTreeAndDate: true,
				notChooseTree: true,
				conditionTypeThirdOptions: [],
				// 后端动态获取的数据
				allUsers: null,
				allDepartments: null,
				allJobs: null,
				allDepJobs: null,
				allCanEditOptions: null,
				allConnectSetData: null
			}
		},
		watch: {
			'dataProp': {
				handler(n, o) {
					const data = n
					console.log('dataProp', data)
					this.dataList = data.data || []
					this.kind = data.type || 'check'
					this.name = data.name || ''
					this.nodeType = data.nodeType || 1
					this.nodeSwitch = data.nodeSwitch == 1 ? 1 : 0
					this.nodeCanChooseSwitch = data.nodeCanChooseSwitch == 1 ? 1 : 0
					this.nodeCanChooseValue = data.nodeCanChooseValue || []
					this.nodeCanAddReadersSwitch = data.nodeCanAddReadersSwitch == 1 ? 1 : 0
					this.nodePrevReadersValue = data.nodePrevReadersValue || []
					this.nodeAfterReadersValue = data.nodeAfterReadersValue || []
				},
				deep: true,
				immediate: true
			},
			'typeProp'(val) {
				this.type = val
				// type是line时，加载表单所设置的连接配置项
				if (this.type === 'line') this.setConnectPropertyData()
				// type是node时，加载表单所设置的节点配置项
				if (this.type === 'node') this.setNodePropertyData()
			}
		},
		beforeDestroy() {
			this.$nextTick(() => {
				this.dataList = []
			})
		},
		mounted() {
			this.$nextTick(() => {
				// 初始化元符号
				this.initSourceList()
				// type是line时，加载表单所设置的连接配置项
				if (this.type === 'line') this.setConnectPropertyData()
				// type是node时，加载表单所设置的节点配置项
				if (this.type === 'node') this.setNodePropertyData()
				// 初始化条件的关系select
				this.conditionTypeSecondOptions = this.conditionTypeSecondOptionsDefault[this.conditionTypeSecondOptionsCur]
			})
		},
		methods: {
			getConditionTypeItem(typeList) {
				let curItem = null
				this.conditionTypeFirstOptions.forEach((item) => {
					if ('' + item.value === '' + typeList[0]) {
						item.children.forEach((innerItem) => {
							if ('' + innerItem.value === '' + typeList[1]) curItem = cloneDeep(innerItem)
						})
					}
				})
				return curItem
			},
			getConditionOperatorItem(operatorValue) {
				let curItem = null
				this.conditionTypeSecondOptions.forEach(item => {
					if ('' + item.value === '' + operatorValue) curItem = cloneDeep(item)
				})
				return curItem
			},
			getConditionValueItem(value) {
				let curItem = null
				if (Array.isArray(value)) {
					let dep = ''
					if (this.conditionTypeSecondOptionsCur === 'choose_tree') {
						this.conditionTypeThirdOptions.forEach(item => {
							if ('' + item.value === '' + value[0]) {
								dep = item.label
								item.children.forEach((innerItem) => {
									if ('' + innerItem.value === '' + value[1]) {
										const temp = cloneDeep(innerItem)
										temp.label = dep + '.' + temp.label
										curItem = temp
									}
								})
							}
						})
					}
					if (this.conditionTypeSecondOptionsCur === 'own') {
						const temp = this.conditionTypeThirdOptions.filter(item => {
							let flag = false
							value.forEach(val => {
								if (item.value === val) flag = true
							})
							return flag
						})
						temp.forEach(item => {
							dep += (item.label + '、')
						})
						curItem = {
							label: dep.substr(0, dep.length - 1),
							value: cloneDeep(value)
						}
					}
				} else {
					this.conditionTypeThirdOptions.forEach(item => {
						if ('' + item.value === '' + value) curItem = cloneDeep(item)
					})
				}
				return curItem
			},
			// 改变条件类型
			changeConditionType(value) {
				const curItem = this.getConditionTypeItem(value)
				if (curItem === null) {
					this.$message.info('请选择类型')
					return
				}
				// 联动关系
				this.conditionTypeSecondOptionsCur = curItem.type
				this.conditionTypeSecondOptions = this.conditionTypeSecondOptionsDefault[curItem.type]
				// 置空关系
				this.cuForm.operator = null
				// 联动内容
				this.notChoose = (curItem.type !== 'choose' && curItem.type !== 'belong' && curItem.type !== 'choose_tree' &&
					curItem.type !== 'own' && curItem.type !== 'date')
				this.notChooseTreeAndOwnAndDate = (curItem.type !== 'choose_tree' && curItem.type !== 'own' && curItem.type !==
					'date')
				this.notChooseTreeAndDate = (curItem.type !== 'choose_tree' && curItem.type !== 'date')
				this.notChooseTree = (curItem.type !== 'choose_tree')
				this.conditionTypeThirdOptions = curItem.options
				// 置空内容
				this.cuForm.value = null
			},
			// 初始化元符号id，避免循环id冲突
			initSourceList() {
				const temp = this.sourceList.map((item) => {
					item.id = this.getUUID()
					return item
				})
				this.sourceList = cloneDeep(temp)
			},
			// type=node时设置表单的节点配置项
			setNodePropertyData() {
				this.conditionTypeFirstOptions = [{
					label: '节点配置项',
					value: '1',
					children: [{
						label: '人员',
						type: 'choose',
						value: '1'
					}, {
						label: '部门领导',
						type: 'choose',
						value: '2'
					}, {
						label: '公司领导',
						type: 'choose',
						value: '3'
					}, {
						label: '部门职位',
						type: 'choose_tree',
						value: '4'
					}, {
						label: '提交人自身',
						type: 'own',
						value: '5'
					}]
				}]

				// 查询当前公司所有人员
				getAllUsersData().then(res => {
					this.allUsers = res.data
					this.conditionTypeFirstOptions[0].children[0].options = cloneDeep(this.allUsers)
					// 查询当前公司所有人员
					// 可选待选项
					this.nodeCanChooseOptions = cloneDeep(this.allUsers)

					// 查询当前公司所有人员
					// 前置传阅人待选项
					this.nodePrevReadersOptions = cloneDeep(this.allUsers)

					// 查询当前公司所有人员
					// 后置传阅人待选项
					this.nodeAfterReadersOptions = cloneDeep(this.allUsers)
				})

				// 查询当前公司所有职位
				getAllJobsData().then(res => {
					this.allJobs = res.data
					this.conditionTypeFirstOptions[0].children[1].options = cloneDeep(this.allJobs)
					this.conditionTypeFirstOptions[0].children[2].options = cloneDeep(this.allJobs)
				})

				// 查询当前公司组织职位树
				getAllDepJobsData().then(res => {
					this.allDepJobs = res.data
					this.conditionTypeFirstOptions[0].children[3].options = cloneDeep(this.allDepJobs)
				})

				// 查询当前模板配置的流程中可修改项
				var form_module_id = localStorage.getItem('form_module_id')
				if (form_module_id) {
					getAllCanEditOptions(form_module_id).then(res => {
						// console.log('res',res)
						if(res.data){
							this.allCanEditOptions = res.data
							this.conditionTypeFirstOptions[0].children[4].options = cloneDeep(this.allCanEditOptions)
						}
					})
				}
			},
			// type=line时设置表单的连接配置项
			setConnectPropertyData() {
				this.conditionTypeFirstOptions = [{
					label: '提交人相关',
					value: '1',
					children: [{
						label: '提交人',
						type: 'choose',
						value: 'applyer'
					}, {
						label: '提交人部门',
						type: 'belong',
						value: 'applyer_org'
					}]
				}, {}]

				// 查询当前公司所有人员
				getAllUsersData().then(res => {
					this.allUsers = res.data
					this.conditionTypeFirstOptions[0].children[0].options = cloneDeep(this.allUsers)
				})

				// 查询当前公司所有组织，后期可改为显示组织树
				getAllDepartmentsData().then(res => {
					this.allDepartments = res.data
					this.conditionTypeFirstOptions[0].children[1].options = cloneDeep(this.allDepartments)
				})

				// 查询表单相关条件配置项
				var form_module_id = localStorage.getItem('form_module_id')
				if (form_module_id) {
					getConnectSetData(form_module_id).then(res => {
						//console.log('res', res)
						if(res.data){
							this.allConnectSetData = res.data
							const data = this.allConnectSetData
							this.conditionTypeFirstOptions[1] = {
								label: '表单相关',
								value: '2',
								children: data.map((item) => {
									return {
										label: item.label,
										type: item.type,
										value: item.value,
										options: item.options || []
									}
								})
							}
						}
					})
				}
				// let data = getConnectSetData()
			},

			// 返回唯一标识
			getUUID() {
				return Math.random().toString(36).substr(3, 10)
			},
			// 元符号拖拽结束
			sourceEnd(evt, e) {
				const temp = cloneDeep(this.sourceList[evt.oldIndex])
				temp.id = this.getUUID()
				this.sourceList[evt.oldIndex] = temp
			},
			// 删除条件
			deleteData(index) {
				this.dataList.splice(index, 1)
			},
			// 打开新增条件弹框
			addCondition() {
				this.dialogCU = true
				this.dialogCULoading = false
			},
			// 新增条件
			onAdd() {
				if (this.cuForm.type === null) {
					this.$message.error('请选择类型')
					return
				}
				if (this.cuForm.operator === null && this.conditionTypeSecondOptionsCur !== 'own') {
					this.$message.error('请选择关系')
					return
				}
				if (this.cuForm.value === null && this.conditionTypeSecondOptionsCur !== 'own') {
					this.$message.error('请选择/填写内容')
					return
				}
				if (Array.isArray(this.cuForm.value) && this.cuForm.value.length === 0 && this.conditionTypeSecondOptionsCur ===
					'own') {
					this.cuForm.operator = null
				}
				// 类型、关系、内容
				const type = this.getConditionTypeItem(this.cuForm.type)
				const operator = this.getConditionOperatorItem(this.cuForm.operator)
				let valueName = this.cuForm.value
				if (this.conditionTypeThirdOptions && this.conditionTypeThirdOptions.length > 0) {
					// 判断内容是否是choose类型，是则valueName=所选项的label
					const value = this.getConditionValueItem(this.cuForm.value)
					valueName = (value === null ? '' : value.label)
				}

				// 将条件加入数据list
				const tempForm = cloneDeep(this.cuForm)
				if (Array.isArray(tempForm.value)) {
					if (this.conditionTypeSecondOptionsCur === 'choose_tree') tempForm.value = cloneDeep(tempForm.value[1])
					if (this.conditionTypeSecondOptionsCur === 'own') tempForm.value = cloneDeep(tempForm.value)
				}
				this.dataList.push({
					id: this.getUUID(),
					name: (type === null ? '' : type.label) + ' ' + (operator === null ? '' : operator.label) + ' ' + valueName,
					type: 'condition',
					value: cloneDeep(tempForm)
				})
				// 关闭弹框
				this.dialogCUClose()
				this.dialogCU = false
			},
			dialogCUClose() {
				// 置空form
				this.cuForm = {
					type: null,
					operator: null,
					value: null
				}
				this.notChoose = true
				this.notChooseTreeAndOwn = true
				this.notChooseTree = true
				// 置空内容选择项
				this.conditionTypeThirdOptions = []
			},
			// 将数据list传至父组件
			save() {
				const nodeType = parseInt(this.nodeType)
				const isNodeType3 = (nodeType === 3) // 3类型为自由编辑，即提交人可自由编辑流程
				const nodeCanChooseSwitch = !isNodeType3 ? parseInt(cloneDeep(this.nodeCanChooseSwitch)) : 0
				const data = (!isNodeType3 && nodeCanChooseSwitch === 0) ? cloneDeep(this.dataList) : []

				const extraData = {
					name: cloneDeep(this.name),
					nodeType: nodeType,
					nodeSwitch: !isNodeType3 ? parseInt(cloneDeep(this.nodeSwitch)) : 0,
					nodeCanChooseSwitch: nodeCanChooseSwitch,
					nodeCanChooseValue: (!isNodeType3 && nodeCanChooseSwitch === 1) ? cloneDeep(this.nodeCanChooseValue) : [],
					nodeCanAddReadersSwitch: !isNodeType3 ? parseInt(cloneDeep(this.nodeCanAddReadersSwitch)) : 0,
					nodePrevReadersValue: !isNodeType3 ? cloneDeep(this.nodePrevReadersValue) : [],
					nodeAfterReadersValue: !isNodeType3 ? cloneDeep(this.nodeAfterReadersValue) : []
				}

				if ('' + this.type === 'line') this.$emit('saveLine', data)
				if ('' + this.type === 'node') this.$emit('saveNode', data, extraData)
			}
		}
	}
</script>
<style>
	.own-info-popover {
		margin: 0 10px;
	}

	.own-el-condition-form-item-drag {
		border-top: 1px dashed #989898;
		padding-top: 10px;
	}

	.own-el-condition-form-item:first-child {
		border-top: 1px dashed #989898;
		padding-top: 15px;
	}

	.own-el-condition-form-item .el-radio {
		margin-right: 0;
	}

	.own-el-condition-form-item .el-form-item__label {
		text-align: left;
		padding: 0 12px;
	}

	.flow-node-condition-form-item {
		height: 35px;
		background: #FFFFFF;
		color: #000;
		line-height: 35px;
		padding: 0 12px;
		font-size: 14px;
		clear: both;
	}

	.flow-node-condition-form-item>.title {
		float: left;
		font-size: 14px;
		color: #606266;
		font-weight: 700;
	}

	.flow-node-condition-form-item>.memo {
		float: right;
	}

	.flow-node-condition {
		position: relative;
		display: inline-block;
		color: #565758;
		min-width: 40px;
		padding: 0 5px;
		height: 30px;
		line-height: 30px;
		border: 1px dashed #E0E3E7;
		background-color: #FFFFFF;
		text-align: center;
		border-radius: 5px;
		margin: 10px 5px;
	}

	.flow-node-condition:hover {
		cursor: move;
		background-color: #F0F7FF;
		border: 1px dashed #1879FF;
	}

	.flow-condition-draggable-area {
		background-color: #f8f8f8;
		border-top: 1px solid #dce3e8;
		border-bottom: 1px solid #dce3e8;
	}

	.flow-condition-draggable-area-target {
		min-height: 120px;
	}

	.flow-condition-close {
		position: absolute;
		right: -8px;
		top: -8px;
		width: 16px;
		height: 16px;
		background: #FFFFFF;
		border: 1px dashed #E0E3E7;
		border-radius: 8px;
	}

	.flow-condition-close:hover {
		cursor: pointer;
		border: 1px dashed red;
	}

	.flow-condition-close:before {
		content: '';
		position: absolute;
		width: 10px;
		height: 1px;
		background: red;
		transform: rotate(45deg);
		top: 6px;
		left: 2px;
	}

	.flow-condition-close:after {
		content: '';
		position: absolute;
		width: 10px;
		height: 1px;
		background: red;
		transform: rotate(-45deg);
		top: 6px;
		left: 2px;
	}
</style>
